import React, { useState } from 'react'
import { UserOutlined, LockOutlined, } from '@ant-design/icons';
import { Input, Button, message, Form } from 'antd';
import '../css/login_index.less'
import '../../../assets/icon/font_4845297_w692z3izwm/iconfont.css'
interface Props {
    changeShow: (val: number) => void
    className?: string
}
import { login1, captcha1 } from '../../../api/csy/api'
import { useNavigate } from 'react-router-dom';

import Yzmcode from './yzmcode'

const LoginView: React.FC<Props> = ({ changeShow, className }) => {

    const [phone, setPhone] = useState<string>('')
    const [password, setPassword] = useState<string>('')

    const dian = (val: number) => {
        changeShow(val)
    }
    const dianji = (val: number) => {
        changeShow(val)
    }

    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate()



    //登录
    const login = () => {
        if (phone == '' || password == '') {
            messageApi.open({
                type: 'warning',
                content: '请输入完整信息',
            });
            return
        } else {
            login1({ phone, password }).then(res => {
                if (res.data.code == 200) {
                    localStorage.setItem('userId', res.data.data.data.phone)
                    localStorage.setItem('accessToken', res.data.data.accessToken)
                    localStorage.setItem('refreshToken', res.data.data.refreshToken)
                    messageApi.open({
                        type: 'success',
                        content: '登录成功',
                    });
                    navigate('/home/ErrorCaptured')
                } else if (res.data.code == 400) {
                    messageApi.open({
                        type: 'warning',
                        content: '账号或密码错误',
                    });
                } else {
                    messageApi.open({
                        type: 'error',
                        content: '登录失败',
                    });
                }
            }
            )
        }
    }
    // 验证手机号格式的正则表达式
    const phoneRegex = /^[1]([3-9])[0-9]{9}$/;
    const hua = () => {
        captcha1().then((res: any) => {
            console.log(res.data.data);
        })
    }

    return (
        <div className={`login_box_right${className ? ' ' + className : ''}`}>
            <span
                style={{
                    fontSize: '2.5rem',
                    fontWeight: 'bold',
                    position: 'fixed',
                    left: '0',
                    clipPath: 'polygon(10% 100%, 0% 0%, 100% 0%)',
                    opacity: '0.5',
                }}
                className="iconfont icon-renlianshibie aaa"
                onClick={() => dian(3)}
            ></span>
            <span
                style={{
                    fontSize: '2.5rem',
                    fontWeight: 'bold',
                    position: 'fixed',
                    right: '0',
                    clipPath: 'polygon(100% 100%, 0% 0%, 100% 0%)',
                    opacity: '0.5',
                }}
                className="iconfont icon-erweima aaa"
                onClick={() => dian(2)}
            ></span>
            {contextHolder}
            <div className='login_box_right_title'>
                <p>账号登录</p>
            </div>
            <div className='denbox'>
                <Form
                    name="login"
                    initialValues={{ remember: true }}
                    onFinish={login}
                    layout="vertical"
                    style={{ marginBottom: '0rem' }}
                >
                    <Form.Item
                        name="phone"
                        // label="账号"
                        rules={[
                            { required: true, message: '请输入手机号' },
                            { pattern: phoneRegex, message: '请输入有效的手机号' },
                        ]}
                    >
                        <Input
                            value={phone}
                            onChange={(e) => setPhone(e.target.value)}
                            size="large"
                            // className="login_box_right_input"
                            placeholder="请输入账号"
                            prefix={<UserOutlined />}
                        />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        // label="密码"
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input.Password
                            size="large"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            // className="login_box_right_input"
                            placeholder="请输入密码"
                            prefix={<LockOutlined />}
                        />
                    </Form.Item>
                    <Yzmcode  ></Yzmcode>
                    <Form.Item style={{ marginBottom: '0rem' }}>
                        <div className="denbox_input">
                            <input type="checkbox" /> 记住密码
                        </div>
                    </Form.Item>
                    <Form.Item>
                        <Button
                            type="primary"
                            block
                            htmlType="submit"
                            className="login-button"
                            style={{marginLeft:'0px'}}
                        >
                            登录
                        </Button>
                    </Form.Item>
                    <div className='box_right_span'>
                        {/* <span className='login_box_right_span' onClick={() => dianji(1)}>立即注册</span>
                        <span className='login_box_right_span' onClick={() => dianji(4)}>忘记密码</span> */}
                    </div>
                </Form>


            </div>
        </div>
    );
}

export default LoginView